<script lang="ts" setup>
import type { MsgItem } from '@/types/room';
import { useUserStore } from '@/stores/user';
const store = useUserStore()
const props = defineProps<{
    info: MsgItem
    type: number
}>()

console.log(props.info, props.type);

</script>

<template>
    <!-- 文字/图片消息 -->
    <!-- 
   登录时存储的用户id 如果是等于 发送人的id, 
   那么这条消息就是用户发送的, 
   否则就是医生发送 
   -->
    <view class="message-item" :class="{ reverse: store.userId === info.from }">
        <image class="room-avatar" src="/static/uploads/doctor-avatar-2.png" />
        <view class="room-message">
            <view class="time">{{ dayjs(info.createTime).format('hh:mm') }}</view>
            <view class="text" v-if="type === 1">
                {{ info.msg?.content }}
            </view>
            <image v-if="type === 4" class="image" :src="info.msg?.picture?.url" mode="widthFix" />
        </view>
    </view>
</template>

<style lang="scss">
.message-item {

    display: flex;
    align-self: flex-start;
    margin-top: 60rpx;

    .room-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
    }

    .room-message {
        margin-left: 20rpx;
    }

    .time {
        font-size: 26rpx;
        color: #979797;
    }

    .image {
        max-width: 420rpx;
        margin-top: 10rpx;
    }

    .text {
        max-width: 420rpx;
        line-height: 1.75;
        padding: 30rpx 40rpx;
        margin-top: 16rpx;
        border-radius: 20rpx;
        font-size: 30rpx;
        color: #3c3e42;
        background-color: #fff;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: -25rpx;
            width: 26rpx;
            height: 52rpx;
            background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
            background-size: contain;
        }
    }

    &.reverse {
        flex-direction: row-reverse;
        align-self: flex-end;

        .room-message {
            margin-left: 0;
            margin-right: 20rpx;
        }

        .time {
            text-align: right;
        }

        .text {
            background-color: #16c2a3;
            color: #fff;

            &::after {
                left: auto;
                right: -25rpx;
                background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
            }
        }
    }
}
</style>